.dramaInfoContainer { display: flex; flex-direction: column; } .dramaInfo { display: flex; flex-direction: column; width: 95%; margin: 0px auto; } .titleContainer { display: flex; justify-content: space-between; align-items: center; } .titleContainer p { color: var(--neon-green); width: 60%; font-family: "Quicksand"; font-weight: 900; font-size: 24px; } .titleContainer img { border-radius: 10px; } .animeDescription { color: #ffffff81; font-family: "Atkinson Hyperlegible"; font-size: 16px; max-height: 120px; margin: 20px auto; text-align: center; overflow-y: auto; } .buttonContainer { margin: 5px auto; text-align: center; max-height: 200px; overflow-y: auto; } .buttonContainer button:focus { opacity: 0.7; transition: transform 0.2s linear; background-color: var(--pastel-red); transform: scale(0.9); } .buttonContainer::-webkit-scrollbar { width: 5px; } .buttonContainer::-webkit-scrollbar-thumb { background-color: var(--soft-purple); border-radius: 5px; } .dramaButton { padding: 8px; font-family: "Quicksand"; font-size: 16px; margin: 5px; width: 130px; border-radius: 5px; border: none; background-color: #f8f6e3dc; cursor: pointer; } .dramaButton:hover { background-color: #97E7E1; } .infoPageContainer { display: flex; height: 100dvh; justify-content: center; align-items: center; } .infoPageContainer p { color: white; } .animeDetails { text-align: center; color: white; font-family: "Quicksand"; } .genreEntries { margin: 3px; padding: 4px; border-radius: 5px; color: var(--neon-green); background-color: #303030; cursor: pointer; } .animeType span { color: var(--light-green); } .animeRelease span { color: var(--soft-purple) } @media (prefers-color-scheme: light) { .animeDescription { color: black; } .infoPageContainer p { color: black; } } @media screen and (max-width: 768px) { .dramaButton { font-size: 14px; width: 100px; } .animeDetails { font-size: 14px; } }